/* 通用样式重置与基础设置 */
* {
  box-sizing: border-box; /* 元素的宽度和高度包含内容、内边距和边框，避免尺寸计算问题 */
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
}

body {
  background: #f5f7fa; /* 页面背景色，浅灰色营造清爽感 */
  color: #333; /* 全局文本颜色，深灰色提高可读性 */
}

/* 头部导航样式 */
header {
  background: #fff; /* 头部背景为白色 */
  height: 64px; /* 固定头部高度 */
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐内容 */
  padding: 0 40px; /* 左右内边距，留出空间 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 顶部轻微阴影，增加层次感 */
}

header img {
  height: 34px; /* 限制头部图片高度 */
  margin-right: 10px; /* 图片右侧间距 */
}

/* 主内容区域样式 */
main {
  max-width: 1200px; /* 限制最大宽度，避免在宽屏上内容过宽 */
  margin: 0 auto; /* 水平居中 */
  padding: 30px 0 80px; /* 上下内边距，控制内容与页头页脚的距离 */
}

/* ===== 歌单推荐区域样式 ===== */
.section {
  margin-bottom: 60px; /* 每个区块底部间距，区分不同内容区域 */
}

/* 区块标题样式 */
.section h2 {
  text-align: center; /* 标题居中显示 */
  font-size: 22px; /* 标题字体大小 */
  letter-spacing: 8px; /* 字母间距，增加标题视觉效果 */
  color: #222; /* 标题颜色，比正文稍深 */
  margin-bottom: 24px; /* 标题底部间距 */
}

/* 标签切换栏样式 */
.tabs {
  display: flex; /* Flex布局，横向排列标签 */
  justify-content: center; /* 标签水平居中 */
  gap: 28px; /* 标签之间的间距 */
  margin-bottom: 24px; /* 标签栏底部间距 */
}

.tabs a {
  font-size: 14px; /* 标签字体大小 */
  color: #888; /* 标签默认颜色，浅灰色 */
  text-decoration: none; /* 去除默认下划线 */
}

.tabs a.active {
  color: #24b14a; /* 激活状态标签颜色，绿色突出显示 */
  font-weight: 600; /* 激活状态字体加粗 */
}

/* 标签悬停效果 */
.item:not(.active):hover {
  color: #24b14a; /* 非激活状态标签悬停时变为绿色 */
}

/* 歌单推荐卡片容器 */
.playlist-row {
  display: flex; /* Flex布局，横向排列卡片 */
  justify-content: space-between; /* 卡片均匀分布，两端对齐 */
  gap: 20px; /* 卡片之间的间距 */
  flex-wrap: wrap; /* 当空间不足时自动换行 */
}

/* 歌单卡片样式 */
.playlist {
  flex: 1; /* 卡片弹性伸缩，占满可用空间 */
  min-width: 200px; /* 卡片最小宽度，确保内容正常显示 */
  background: #fafafa; /* 卡片背景色，接近白色 */
  border-radius: 6px; /* 卡片圆角 */
  overflow: hidden; /* 隐藏超出卡片的内容 */
  transition: transform 0.2s; /* 变换过渡动画，用于悬停效果 */
}

/* 歌单卡片图片样式 */
.playlist img {
  width: 100%; /* 图片宽度占满卡片 */
  height: 160px; /* 固定图片高度 */
  object-fit: cover; /* 图片裁剪填充，保持比例 */
  display: block; /* 去除图片默认的inline带来的间距 */
}

/* 歌单卡片信息区域 */
.playlist .info {
  padding: 12px 10px; /* 内边距 */
  font-size: 13px; /* 信息文字大小 */
}

.playlist .title {
  color: #333; /* 标题颜色 */
  line-height: 1.4; /* 行高，优化多行文本显示 */
  height: 36px; /* 固定高度，超出部分隐藏 */
  overflow: hidden; /* 隐藏超出高度的文本 */
}

.playlist .count {
  color: #999; /* 播放次数颜色，浅灰色 */
  margin-top: 6px; /* 与标题的间距 */
}

/* ===== 新歌首发区域样式 ===== */
.new-section {
  background: #fff; /* 区域背景为白色 */
  border-radius: 8px; /* 区域圆角 */
  padding: 30px 40px; /* 内边距，控制内容与边框的距离 */
}

.new-section h2 {
  text-align: center; /* 标题居中 */
  font-size: 22px; /* 标题大小 */
  color: #222; /* 标题颜色 */
  margin-bottom: 22px; /* 标题底部间距 */
  letter-spacing: 8px; /* 字母间距 */
}

/* 新歌区域标签切换 */
.new-tabs {
  display: flex; /* Flex布局 */
  justify-content: center; /* 标签居中 */
  gap: 24px; /* 标签间距 */
  margin-bottom: 24px; /* 标签栏底部间距 */
}

.new-tabs a {
  color: #888; /* 标签默认颜色 */
  font-size: 14px; /* 标签字体大小 */
  text-decoration: none; /* 去除下划线 */
}

.new-tabs a.active {
  color: #24b14a; /* 激活状态颜色 */
  font-weight: 600; /* 激活状态加粗 */
}

/* 新歌标签悬停效果 */
.new-item:not(.active):hover {
  color: #24b14a; /* 悬停时变色 */
}

/* 新歌网格布局 */
.new-grid {
  display: grid; /* Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 3列布局 */
  gap: 20px; /* 网格项间距 */
}

/* 单个歌曲项样式 */
.song-item {
  display: flex; /* Flex布局，横向排列内容 */
  align-items: center; /* 垂直居中对齐 */
  background: #f9fafb; /* 背景色 */
  border-radius: 6px; /* 圆角 */
  padding: 10px; /* 内边距 */
  transition: background 0.2s; /* 背景色过渡动画 */
}

/* 歌曲项悬停效果 */
.song-item:hover {
  background: #f0f3f5; /* 悬停时背景色变化 */
}

.song-item img {
  width: 60px; /* 歌曲封面宽度 */
  height: 60px; /* 歌曲封面高度 */
  object-fit: cover; /* 图片裁剪填充 */
  border-radius: 4px; /* 封面圆角 */
  margin-right: 12px; /* 与右侧内容的间距 */
}

.song-info {
  flex: 1; /* 弹性伸缩，占满剩余空间 */
}

.song-title {
  font-size: 14px; /* 歌曲标题大小 */
  color: #222; /* 标题颜色 */
  margin-bottom: 4px; /* 与歌手名的间距 */
}

.song-artist {
  color: #888; /* 歌手名颜色 */
  font-size: 13px; /* 歌手名字体大小 */
}

.song-time {
  color: #999; /* 时长颜色 */
  font-size: 12px; /* 时长字体大小 */
  text-align: right; /* 右对齐 */
}

/* ===== MV区域样式 ===== */
.mv-section {
  margin-top: 60px; /* 与上一区域的间距 */
}

.mv-section h2 {
  text-align: center; /* 标题居中 */
  font-size: 22px; /* 标题大小 */
  margin-bottom: 24px; /* 标题底部间距 */
  letter-spacing: 8px; /* 字母间距 */
}

/* MV区域标签切换 */
.mv-tabs {
  display: flex; /* Flex布局 */
  justify-content: center; /* 标签居中 */
  gap: 24px; /* 标签间距 */
  margin-bottom: 24px; /* 标签栏底部间距 */
}

.mv-tabs a {
  color: #888; /* 标签默认颜色 */
  text-decoration: none; /* 去除下划线 */
}

.mv-tabs a.active {
  color: #24b14a; /* 激活状态颜色 */
  font-weight: 600; /* 激活状态加粗 */
}

/* MV标签悬停效果 */
.mv-item1:not(.active):hover {
  color: #24b14a; /* 悬停时变色 */
}

/* MV网格布局 */
.mv-grid {
  display: grid; /* Grid布局 */
  grid-template-columns: repeat(4, 1fr); /* 4列布局 */
  gap: 20px; /* 网格项间距 */
}

/* 单个MV项样式 */
.mv-item {
  background: #fff; /* 背景色 */
  border-radius: 6px; /* 圆角 */
  overflow: hidden; /* 隐藏超出部分 */
}

.mv-item img {
  width: 100%; /* 图片宽度占满容器 */
  height: 140px; /* 图片高度 */
  object-fit: cover; /* 图片裁剪填充 */
  display: block; /* 去除默认间距 */
}

/* MV元信息区域 */
.mv-meta {
  padding: 10px; /* 内边距 */
}

.mv-name {
  font-size: 14px; /* 名称字体大小 */
  color: #222; /* 名称颜色 */
  margin-bottom: 6px; /* 与观看次数的间距 */
}

.mv-views {
  font-size: 12px; /* 观看次数字体大小 */
  color: #999; /* 观看次数颜色 */
}

/* 页脚样式 */
footer {
  margin-top: 60px; /* 与上一区域的间距 */
  background: #333; /* 页脚背景色，深灰色 */
  height: 200px; /* 页脚高度 */
}

/* 分页控件样式 */
.page {
  margin-top: 25px; /* 与内容的间距 */
  display: flex; /* Flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 单个分页项样式 */
.page-item {
  display: inline-block; /*  inline-block布局，横向排列 */
  color: #a2a2a2; /* 默认颜色，浅灰色 */
  line-height: 50px; /* 行高与高度一致，文本垂直居中 */
  padding: 0 20px; /* 左右内边距，增加点击区域 */
  margin: 10px; /* 分页项之间的间距 */
  font-size: 16px; /* 字体大小 */
  text-decoration: none; /* 去除下划线 */
}

/* 分页项交互样式 */
.page-current,
.page-item:not(.page-more):hover {
  background: #24b14a; /* 激活/悬停时背景色，绿色 */
  color: white; /* 激活/悬停时文字颜色，白色 */
}

/* 图片容器通用样式 */
.img-wrap {
  display: flex; /* Flex布局，用于图片居中 */
  position: relative; /* 相对定位，作为子元素的定位基准 */
  overflow: hidden; /* 隐藏超出容器的内容（如放大的图片） */
  width: 100%; /* 宽度100% */
  cursor: pointer; /* 鼠标变为指针，提示可点击 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 图片过渡动画 */
.img-wrap img {
  width: 100%; /* 图片宽度100% */
  transition: all 0.75s ease; /* 所有属性过渡动画，持续0.75秒 */
}

/* 图片悬停放大效果 */
.img-wrap:hover img {
  transform: scale(1.07); /* 放大1.07倍，增强交互感 */
}

/* 图片遮罩层 */
.img-wrap .img-mask {
  position: absolute; /* 绝对定位，覆盖整个图片 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000; /* 黑色遮罩 */
  opacity: 0; /* 默认透明 */
  transition: all 0.5s; /* 过渡动画 */
}

/* 悬停时显示遮罩 */
.img-wrap:hover .img-mask {
  opacity: 0.2; /* 半透明显示 */
}

/* 播放图标样式 */
.img-wrap .play-icon {
  position: absolute; /* 绝对定位 */
  left: 50%; /* 水平居中 */
  top: 50%; /* 垂直居中 */
  opacity: 0; /* 默认透明 */
  transform: scale(0.7); /* 默认缩小 */
  transition: all 0.5s; /* 过渡动画 */
}

.img-wrap .play-icon img {
  width: 60px; /* 图标宽度 */
  height: 60px; /* 图标高度 */
  object-fit: contain; /* 保持图标比例 */
  pointer-events: none; /* 避免鼠标事件影响父元素hover */
}

/* 悬停时显示播放图标 */
.img-wrap:hover .play-icon {
  opacity: 1; /* 完全显示 */
  transform: translate(-50%, -50%) scale(1); /* 移动到中心并恢复原大小 */
}